<template>
  <div class="wps-index">
    <div class="search-side">
      <img src="@/assets/images/wps/logo.png" alt="logo" />
      <div class="search">
        <span><i class="iconfont wos-search fs16" /></span>
        <input type="text" placeholder="搜索文件、模板、文库、技巧..." />
      </div>
    </div>
    <div class="index-content">
      <ul class="menu">
        <li>
          <img src="@/assets/images/wps/document.png" alt="document" />
        </li>
      </ul>
      <div class="history">
        <div class="title">最近</div>
        <table>
          <thead>
            <tr>
              <th>全部类型</th>
              <th>文件位置</th>
              <th>最近修改</th>
              <th>大小</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in historyList" :key="item.id" @click.stop="emit('history', item)">
              <td>
                <div class="name">
                  <img :src="item.src" alt="word" />
                  {{ item.name }}
                </div>
              </td>
              <td>{{ item.path }}</td>
              <td>{{ $timeFormat(item.date) }}</td>
              <td>{{ $sizeFormat(item.size) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { IHistoryList } from '@/components/systemWindow/wps/wps.vue'

defineProps({
  historyList: {
    type: Array as PropType<IHistoryList[]>,
    required: true
  }
})
const emit = defineEmits(['history'])
</script>

<style scoped lang="scss">
.wps-index {
  .search-side {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    img {
      height: 40px;
    }

    .search {
      width: calc(518 / 1192 * 100%);
      height: 40px;
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 50%;
      display: flex;
      align-items: center;
      padding: 0 10px;
      border: 1px solid rgb(174, 177, 179);
      transform: translate3d(-50%, -50%, 0);
      background-color: #fff;
      border-radius: 6px;

      &:hover {
        border-color: rgb(79, 135, 254);
      }

      > span {
        color: rgb(79, 135, 254);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
      }

      input {
        width: calc(100% - 32px);
        height: 100%;
      }
    }
  }

  .index-content {
    padding-top: 10px;
    padding-right: 12px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    height: calc(100% - 40px);

    .menu {
      width: 74px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;

      > li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 6px;
        background-color: #fff;

        img {
          width: 20px;
          height: 20px;
          object-fit: contain;
        }
      }
    }

    .history {
      width: calc(100% - 74px);
      height: 100%;
      background-color: #fff;
      border-radius: 6px 6px 0 0;

      > .title {
        padding-left: 40px;
        font-size: 20px;
        font-weight: bolder;
        display: flex;
        align-items: center;
        height: 78px;
      }

      table {
        padding-left: 14px;
        width: 100%;
        max-height: calc(100% - 78px);
        text-align: left;

        thead {
          th {
            height: 36px;
            border-bottom: 1px solid rgb(241, 241, 241);
          }
        }

        tbody {
          tr {
            border-radius: 8px;
            overflow: hidden;

            &:hover {
              background-color: rgb(241, 241, 241);
            }
          }

          td {
            height: 58px;
            border-bottom: 1px solid rgb(241, 241, 241);

            .name {
              padding-left: 16px;
              display: flex;
              align-items: center;

              img {
                float: left;
                width: 26px;
                height: 26px;
                object-fit: contain;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
